var tree = {
  data:function(){
    return {fileMetas:{name:"我的文件夹",id:"adfasddf",subfiles:[{name:"test",id:"adsfsd",subfiles:[{name:"test2",id:"asdf"}]},{name:"test1",id:"adsfsd"}]}};
  },

  render:function(createElement){
    var _this = this;
    function getHtml(data,level_arg){
        var child = [];
        var header = '<div class="toggle"><i class="arrow"></i></div>'+
        '<div class="name">'+
          '<i class="folder-icon"></i>'+
          '<span class="folder-name" >'+data.name+'</spna>'+
        '</div>';
        var treeTitle = createElement("div",{ domProps: {
        innerHTML: header
      },class:{"tree-title":true, "expandable":true, "expanded":true},style:{"padding-left":level_arg*20+"px"},on:{
        click:_this.choosen
      },attrs:{
        "file-id":data.id
      }});
      child.push(treeTitle);
      var lis = [];
        if(data.subfiles && data.subfiles.length > 0){
          level_arg ++;
          for(var i=0;i<data.subfiles.length;i++){
            var li = createElement("li",[getHtml(data.subfiles[i],level_arg)]);
            lis.push(li);
          }
        }
        var ul = createElement("ul",{class:{"tree-container":true}},lis);
        child.push(ul);
      var root = createElement("div",{class:{"file-tree":true}},child);
      return root;
    }

    if(this.fileMetas){
      return getHtml(this.fileMetas,0);
    }else{
      return createElement("div",'没有数据');
    }

},
methods:{
  "choosen":function(event){
    var jqEle = $(event.currentTarget);
    $(this.$parent.$parent.$el).find("button.btn[disabled]").removeAttr("disabled");
    this["file-id"] = jqEle.attr("file-id");
    $(this.$el).find("div.tree-title").removeClass("selected");
    jqEle.addClass("selected");
  }
}
};

var Dialog = {
  props:["nomesh"],
  data:function(){
    return {"id":"",btn1Text:"确定",btn2Text:"取消"};
  },
  template:'<div class="widget-dialog" v-bind:class="{noMesh:nomesh}">'+
		'<div class="widget-dialog-container">'+
			'<div class="widget-dialog-head">'+
				'<span class="widget-dialog-title">{{title}}</span>'+
				'	<span class="svg_dialog_close" v-on:click.stop="hide"></span>'+
			'</div>'+
		  '<dialog-body ref="dialog_body"></dialog-body>'+
      '<div class="widget-dialog-footer">'+
        '<button class="btn" disabled v-on:click.stop="confirm($event)">{{btn1Text}}</button>'+
        '<button class="btn btn-cancel" v-on:click.stop="hide">{{btn2Text}}</button>'+
      '</div>'+
		'</div>'+
	'</div>',
  methods:{
    "show":function(){
      $(this.$el).show();
      if(this.showJcrop){
        this.showJcrop();
      }
    },
    "hide":function(){
      $(this.$el).hide();
      if(this['jcrop_api']){
        this['jcrop_api'].destroy();
        this['jcrop_api'] = null;
      }
    },
    "confirm":function(){
      if(this.doConfirm()){
        this.hide();
      }
    }
  }
};

var MoveToBody = {
  components:{
    "tree":tree
  },
  template:'<div class="widget-dialog-body"><div><i class="file-icon"></i>新建文件夹</div>'+
  '<div class="catagory-chose-container">'+
    '<div class="move-to">移动到</div>'+
    '<div class="catagory-chose-tree">'+
      '<tree ref="my_tree"></tree>'+
    '</div>'+
  '</div>'+
  '</div>'
};
var MoveToDialog = {
  data:function(){
    return {title:"移动到"};
  },
  components:{
    "dialog-body":MoveToBody
  },
  extends:Dialog,
    methods:{
      "doConfirm":function(event){
        return true;
      },
      "hide":function(){
        $(this.$el).hide();

        this.$refs.dialog_body.$refs.my_tree.$data.fileMetas = null;
      }
    }
};

var InfoBody = {
  template:'<div class="widget-dialog-body" style="width:380px;">'+
  '<div class="info-body">'+
    '<div class="item">'+
      '<span class="item-key">头像</span>'+
      '<div class="item-value">'+
        '<div class="info-img"><img class="userIcon" src="static/1496898148113.jpg"></div>'+
        '<div class="user-info-right"><button class="widget-upload-btn changeIcon btn"><form style="position:relative;" enctype="multipart/form-data" method="post" class="widget-upload-btn">上传新头像<input type="file" v-on:change="uploadImage($event)" accept="image/*"></form></button>'+
        '<span>支持JPG、PNG、GIF格式，小于2MB</span></div>'+
      '</div>'+
    '</div>'+
    '<div class="item"><span class="item-key">账号</span><span class="item-value">asdfasdfasdfsdfsdf</span></div>'+
    '<div class="item"><span class="item-key">昵称</span><div class="item-value"><input type="text" class="nickname" value="asdfsdf"></div></div>'+
    '<div class="item"><span class="item-key">性别</span><div class="item-value"><input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex">保密</div></div>'+

    '<div class="item align-top"><span class="item-key">签名</span><div class="item-value"><textarea class="info-sign" type="text" max-input-length="60"></textarea></div></div>'+
    '</div>'+
  '</div>',
  methods:{
    "uploadImage":function(event){
      this.$parent.$parent.$refs.upload_icon_dialog.show();

    }
  },
};
var InfoDialog = {
  data:function(){
    return {
      title:"个人信息",
      btn1Text:"保存",btn2Text:"取消"
    }
  },
  components:{
    "dialog-body":InfoBody
  },
  extends:Dialog,

  mounted: function () {
    $(this.$el).find("button.btn[disabled]").removeAttr("disabled");
  }
};

var UploadImageBody = {
  template:'<div class="widget-dialog-body" style="width: 435px; height: 230px;">'+
  '<div class="show-icon-box"><img src="static/38dbb6fd5266d016c364ad369a2bd40735fa35aa.jpg" id="uploadImage"/></div>'+
  '<div class="preview" id="preview-pane"><div class="preview-container"><img src="static/38dbb6fd5266d016c364ad369a2bd40735fa35aa.jpg" class="preview-img"/></div><p>预览图：120×120 像素</p></div>'+
  '</div>'
};

var UploadImageDialog = {
  data:function(){
    return {
      title:"上传新头像",
      btn1Text:"保存",btn2Text:"取消"
    }
  },
  components:{
    "dialog-body":UploadImageBody
  },
  extends:Dialog,
  mounted: function () {

    $(this.$el).find("button.btn[disabled]").removeAttr("disabled");
  },
  methods:{
    "showJcrop":function(){
      if(this['jcrop_api']){
        this['jcrop_api'].enable();
      }else{
        var jcrop_api,
            boundx,
            boundy,

            // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),

            xsize = $pcnt.width(),
            ysize = $pcnt.height();
        $("#uploadImage").Jcrop({minSize:[100,100],boxWidth:260,boxHeight:200,aspectRatio:1,onChange: updatePreview,
          onSelect: updatePreview,allowSelect:false},function(){
          //get image's real size
          var bounds = this.getBounds();
          boundx = bounds[0];
          boundy = bounds[1];
          //get scaled image size
          var widgetSize = this.getWidgetSize();
          jcrop_api = this;
          var x = (boundx-200)/2,y = (boundy-200)/2,
          x1 = x+200,y1 = y+200;
          this.setSelect([x,y,x1,y1]);
          $("div.jcrop-holder").css("margin-top",(200-widgetSize[1])/2);

        });
        this["jcrop_api"] = jcrop_api;
        function updatePreview(c)
        {
          if (parseInt(c.w) > 0)
          {
            var rx = xsize / c.w;
            var ry = ysize / c.h;

            $pimg.css({
              width: Math.round(rx * boundx) + 'px',
              height: Math.round(ry * boundy) + 'px',
              marginLeft: '-' + Math.round(rx * c.x) + 'px',
              marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
          }
        };
      }
    }
  }
};
